<template>


<div class="nav">
    <div class="xiaoyu">
      <p>
        &lt;
        <span>北京横店电影城</span>
      </p>

    </div>

    <div class="dongzhi">
      <p class="tongzhil">
        感谢你的配合
        <span class="tongzhir">一个通知↓</span>
      </p>
    </div>

 <div class="qiao">
  <p class="shu1">📕</p>
  <p>￥49</p>
  <p class="shu2">📕</p>
  <p >￥49</p>
  <p class="shu3">📕</p>
  <p>￥49</p>
  <p class="shu4">📕</p>
  <p>￥49</p>
 </div>

           
      <div class="zuowei">
       <div class="biaoti">
       <div> 5号堂课主题厅（影视冠名、粉丝包场、可咨询前台）</div>
       
       </div>
        <div class="weizi">
          <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <p style="clear: both;"></p>
         <div class="zimu">
          <div class="bkx">🔒</div>
          <div>不可以选</div>
          <div class="cx">📕</div>
          <div>已销</div>
          <div class="kx">√</div>
          <div>可选</div>
         </div>
            
        </ul>
        </div>
      
         
      </div>



      <div class="dianying">
         <p class="dianzi">独行月球
          <div class="xinashi">
            收起场次↑
           </div>
         </p>
         <p class="dianshi">周六08月32日 25:61  国语 4D</p>
      
      </div>

      <div class="shiyu">
   <div class="shiyu1">
    <p>25:61</p>
    <p>国语4D</p>
    <p>￥49</p>

    
   </div>
   <div class="shiyu1">
    <p>25:61</p>
    <p>国语4D</p>
    <p>￥49</p>
   </div>
   <div class="shiyu1">
    <p>25:61</p>
    <p>国语4D</p>
    <p>￥49</p>
   </div>
      </div>

 
      <div class="zuihou">
        <p>请先选座</p>
      </div>
  </div>


</template>

<style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

    .nav {
      width: 100%;
    }

    .xiaoyu {
      width: 100%;
    }

    .xiaoyu p {
      width: 100%;
      margin-left: 15px;
      margin-top: 15px;
      font-size: 35px;
      font-weight: 200;
    }

    .xiaoyu span {
      margin-left: 40%;
      font-size: 20px;
      font-weight: 400;
      display: inline-block;

    }

    .dongzhi {
      white-space: nowrap;
      width: 100%;
      margin-top: 15px;
      background-color: #FBF4D8;
      height: 50px;
    }

    .tongzhil {
      width: 100%;
      margin-left: 15px;
      color: #E68E1A;
      line-height: 50px;
    }

    .tongzhir {
      width: 100%;
      color: #E68E1A;
      margin-left: 80%;
      white-space: nowrap;

    }
    .qiao {
      height: 40px;
      width: 100%;
      margin-top: 25px;
    
      
    }
    .qiao p {
      float: left;
      font-size: 10px;
     
    }
   .shu1,.shu2,.shu3,.shu4 {
      padding-left: 20px;
    }
    .shu2 {
      color: aqua;
    }
    .zuowei {
      width: 100%;
      clear: both;
      margin-top: 9px;
      height: 600px;
      background-color: #F4F4F4;
    }
    .weizi {
      margin-top: 30px;
    }
    .biaoti {
      
      text-align: center;
   
    }
    .biaoti  div {
      color: #FFFFFF;
       display: inline-block;
         width: 500px;
      background-color: #DBDBDB;
      border-bottom-left-radius: 15px;
      border-bottom-right-radius: 15px;
    }
    ul {
      width: 650px;
      height: 600px;

      margin: 0 auto;
    }

    li {
      margin: 10px;
      width: 80px;
      height: 50px;
      float: left;
      list-style: none;
      background: #C0C0C0;
    

    }
    .click {
      font-size: 10px;
      text-align: center;
      line-height: 50px;
      font-family: '仿宋';
      font-weight: bold;
      color: #333;
      background: orange;
      border: 1px solid red;
    }
    .zimu div{
      margin-top: 40px;
      float: left;
    }

    .weizi div .zimu, .bkx, .cx,.kx{
      
      padding-left: 80px;
    }
    .dianying {
     
      width: 100%;
      height: 30px;
      margin-top: 20px;
     
    }
    .dianying {
 
  
      margin-left: 35px;
    }
    .dianying .dianzi{

  
           color: #E68E1A;
    }
    .dianying .dianshi {
    margin-top: 5px;
      color: cadetblue;
      font-size: 15px;
   
    }
    .xinashi {
      clear: both;
      float: right;
       margin-right: 60px;
       color: #FF5F16;
       cursor: pointer;
    }
    .shiyu {
    
     
      margin-top: 35px;
      padding: 6px 0px;
    }
    .shiyu1 {
      margin-left: 45px;
      text-align: center;
    float: left;
        width: 100px;
        height: 80px;
      border: 1px red solid;
      margin-bottom: 20px;
    }
    .zuihou {
      text-align: center;
      height: 50px;
  
      line-height: 50px;
      clear: both;
      width: 100%;
      background-color: #FF5F16;
    }
    .zuihou  p {
      color: #E68E1A;
      cursor: pointer;
    }


</style>

  <script>

  export default {
    data() {
      return {
         dataList: [],
      }
    },
    mounted() {
    this.dianji()
    },
    methods:{
     dianji(){
        //没有click类的时候，进行添加，同时对文本进行赋值；反之，清空click类，同时文本值为空
    let lis = document.getElementsByTagName('li');//获取li元素
    for (let i = 0; i < lis.length; i++) {
      lis[i].onclick = function () {
        //getAttribute() 方法返回指定属性名的属性值
        let res = this.getAttribute('class');//getAttribute（）判断class属性是否存在
        if (!res) {//当属性值不存在
          this.setAttribute('class', 'click');//设置属性，添加一个属性
          this.innerText = '座位已选';//设置文本
        } else {
          this.setAttribute('class', '');//取消属性
          this.innerText = '';//取消文本
        }
      }
    }
     }     
    }
  }
  
  </script>



